import React from 'react';
import {
  RedoOutlined,
  ColumnHeightOutlined,
  FullscreenOutlined,
} from '@ant-design/icons';
import { Space, Tooltip } from 'antd';
import CloumnSetting from '../ColumnSetting';

export type ListToolBarSetting = {
  icon: React.ReactNode;
  tooltip?: string;
  key?: string;
  onClick?: (key?: string) => void;
};
type SettingPropType = React.ReactNode | ListToolBarSetting;

export type SettingConfig = {
  reload?: boolean;
  size?: boolean;
  setting?: boolean;
  fullScreen?: boolean;
};

export type TableSettingProps = {
  config?: SettingConfig;
  show?: boolean;
};

/**
 * 获取配置区域 DOM Item
 *
 * @param setting 配置项
 */
function getSettingItem(setting: SettingPropType) {
  if (React.isValidElement(setting)) {
    return setting;
  }
  if (setting) {
    const settingConfig: ListToolBarSetting = setting as ListToolBarSetting;
    const { icon, tooltip, onClick, key } = settingConfig;
    if (icon && tooltip) {
      return (
        <Tooltip title={tooltip}>
          <span
            key={key}
            onClick={() => {
              if (onClick) {
                onClick(key);
              }
            }}
          >
            {icon}
          </span>
        </Tooltip>
      );
    }
    return icon;
  }
  return null;
}

function renderSetting<T>(options: SettingConfig) {
  return Object.keys(options)
    .filter((item) => item)
    .map((key) => {
      if (key === 'setting') {
        return <CloumnSetting {...options[key]} key={key} />;
      }
      if (key === 'reload') {
        return <RedoOutlined />;
      }

      if (key === 'size') {
        return <ColumnHeightOutlined />;
      }

      if (key === 'fullScreen') {
        return <FullscreenOutlined />;
      }
      return key;
    })
    .filter((item) => item);
}

function TableSetting<T>({ config, show }: TableSettingProps) {
  const getSetting = () => {
    return {
      reload: true,
      size: true,
      setting: true,
      fullScreen: true,
      ...config,
    };
  };
  if (show) {
    return;
  }

  return (
    <div>
      <Space>{renderSetting(getSetting())}</Space>
    </div>
  );
}

export default TableSetting;
